<template>
  <div class="form1">
    <div class="inviteCode">
      <input type="text" placeholder="邀请码" v-model="invitation_code" :class="{'error': errorMessage}" @input="resetError">
      <div class="errorMessage">{{ errorMessage }}</div>
      <div class="agreement">我已阅读并同意<a href="https://hfsession.com/agreement/" class="
      cp">《用户协议》</a>及<a class="cp">《隐私协议》</a></div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    // 邀请码
    invitation_code: {
      get () {
        return this.$store.state.register.invitation_code
      },
      set (val) {
        this.$store.commit('register/set_invitation_code', val)
      }
    },
    // 错误提示消息
    errorMessage () {
      return this.$store.state.register.errorMessage
    }
  },
  methods: {
    // 重置错误信息
    resetError () {
      if (this.errorMessage) {
        this.$store.commit('register/set_errorMessage', '')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .form1{
    padding: 0 70px;
    input{
      height: 48px;
      border: 1px solid #d8dee9;
      border-radius: 2px;
      outline: none;
      padding-left: 16px;
      font-size: 16px;
      color: #0D172C;
      &::-webkit-input-placeholder{
        font-size: 16px;
        color: #9eaac4;
      }
    }
    .inviteCode{
      margin-bottom: 42px;
      position: relative;
      input{
        width: 400px;
        border-radius: 2px;
      }
      .error {
        border-color: #FF2929;
      }
      .agreement{
        position: absolute;
        top: 154px;
        height: 17px;
        font-size: 12px;
        color: #2e3f64;
        line-height: 17px;
        a {
          font-size: 12px;
          color: #304EEC;
        }
      }

      .errorMessage {
        font-size: 12px;
        color: #FF2929;
        position: absolute;
        top: 53px;
      }
    }
  }
</style>
